<template>
  <div class="RecommendedPlaylist">
    <!-- 头部 -->
    <div class="RecommendedPlaylist_top">
      <div class="RecommendedPlaylist_top_div">
        <img :src="lists.coverImgUrl" width="150px" v-if="lists.coverImgUrl" />
        <img width="150px" v-else />
        <div class="RecommendedPlaylist_title">精品歌单</div>
        <p>{{lists.name}}</p>
        <p class="RecommendedPlaylist_p">{{lists.description}}</p>
      </div>
      <div class="RecommendedPlaylist_bg">
        <div></div>
        <img :src="lists.coverImgUrl" v-if="lists.coverImgUrl" alt />
        <img :src="lists.coverImgUrl" v-else alt />
      </div>
    </div>
    <!-- 点击切换 -->
    <div class="RecommendedPlaylist_table">
      <span :class="{active: tag=='全部' ? true :false} " @click="tag='全部'">全部</span>
      <span :class="{active: tag=='欧美' ? true :false} " @click="tag='欧美'">欧美</span>
      <span :class="{active: tag=='华语' ? true :false} " @click="tag='华语'">华语</span>
      <span :class="{active: tag=='流行' ? true :false} " @click="tag='流行'">流行</span>
      <span :class="{active: tag=='说唱' ? true :false} " @click="tag='说唱'">说唱</span>
      <span :class="{active: tag=='摇滚' ? true :false} " @click="tag='摇滚'">摇滚</span>
      <span :class="{active: tag=='民谣' ? true :false} " @click="tag='民谣'">民谣</span>
      <span :class="{active: tag=='电子' ? true :false} " @click="tag='电子'">电子</span>
      <span :class="{active: tag=='轻音乐' ? true :false}" @click="tag='轻音乐'">轻音乐</span>
      <span :class="{active: tag=='影视原声' ? true :false}" @click="tag='影视原声'">影视原声</span>
      <span :class="{active: tag=='ACG' ? true :false}" @click="tag='ACG'">ACG</span>
      <span :class="{active: tag=='怀旧' ? true :false}" @click="tag='怀旧'">怀旧</span>
      <span :class="{active: tag=='治愈' ? true :false}" @click="tag='治愈'">治愈</span>
      <span :class="{active: tag=='旅行' ? true :false,last:true}" @click="tag='旅行'">旅行</span>
    </div>
    <!-- 底部 -->
    <div class="RecommendedPlaylist_footer">
      <ul v-if="footerlists">
        <li v-for="(item,index) in footerlists" :key="index">
          <img :src="item.coverImgUrl" alt width="180px" />
          <p>{{item.name}}</p>
        </li>
      </ul>
    </div>
    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :current-page="page"
      :page-size="10"
      @current-change="currentClick"
      class="centers"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lists: {},
      footerlists: {},
      tag: "全部",
      total: 1,
      page: 1
    };
  },
  watch: {
    tag(tag) {
      this.titleAxios(tag);
      this.fooerAxios(tag);
      this.page = 0;
    }
  },
  methods: {
    // 头部title
    titleAxios(tag) {
      this.$http({
        method: "get",
        params: {
          limit: 1,
          cat: this.tag || tag
        },
        url: "/top/playlist/highquality"
      }).then(res => {
        this.lists = res.data.playlists[0];
      });
    },
    // 底部MV
    fooerAxios(tag) {
      this.$http({
        url: "/top/playlist",
        method: "get",
        params: {
          limit: 10,
          offset: (this.page - 1) * 10,
          cat: this.tag || tag
        }
      }).then(res => {
        this.footerlists = res.data.playlists;
        this.total = res.data.total;
      });
    },
    currentClick(val) {
      this.page = val;
      // 重新获取一遍数据
      this.fooerAxios();
    }
  },
  created() {
    // 头部title
    this.titleAxios();
    // 底部
    this.fooerAxios();
  }
};
</script>

<style lang="less" scoped>
li {
  list-style-type: none;
}
.RecommendedPlaylist {
  width: 1000px;
  margin: 0 auto;
  .RecommendedPlaylist_top {
    display: flex;
    width: 100%;
    height: 200px;
    margin-top: 30px;
    position: relative;
    flex-wrap: wrap;
    overflow: hidden;
    border-radius: 5px;
    border: 1px solid rgb(173, 171, 171);
    .RecommendedPlaylist_top_div {
      width: 100%;
      height: 150px;
      position: relative;
      top: 25px;
      left: 0;
      > img {
        width: 150px;
        height: 150px;
        display: block;
        position: absolute;
        left: 30px;
        z-index: 999;
        border-radius: 10px;
        border: 1px solid rgb(204, 191, 193);
        box-shadow: 0 0 10px rgb(165, 155, 156);
      }
      .RecommendedPlaylist_title {
        position: absolute;
        color: rgb(137, 106, 67);
        padding: 5px 10px;
        border: 2px solid rgb(137, 106, 67);
        left: 200px;
        z-index: 999;
        border-radius: 10px;
      }
      p {
        position: absolute;
        left: 205px;
        top: 40px;
        z-index: 999;
        font-size: 18px;
        color: rgb(182, 152, 143);
      }
      .RecommendedPlaylist_p {
        width: 750px;
        height: 100px;
        top: 70px;
        font-size: 15px;
        color: rgb(158, 96, 77);
        position: relative;
        line-height: 1.4em;
        /* 3 times the line-height to show 3 lines */
        height: 4.2em;
        overflow: hidden;
      }
      .RecommendedPlaylist_p::after {
        content: "...";
        font-weight: bold;
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 0 20px 1px 45px;
      }
    }

    .RecommendedPlaylist_bg {
      position: absolute;
      top: 0px;
      left: 0px;
      height: 200px;
      width: 1000px;
      filter: grayscale(0.5) blur(10px);
      opacity: 0.8;
      overflow: hidden;
      z-index: 4;
      img {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 1000px;
        height: 200px;
        object-fit: cover;
        z-index: 1;
      }
    }
  }
  .RecommendedPlaylist_footer {
    width: 1000px;
    ul {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      position: relative;
      li {
        width: 180px;
        margin-left: 18px;
        margin-top: 10px;
        img {
          display: block;
          width: 100%;
          height: 180px;
          border-radius: 15px;
        }
        p {
          margin-top: 8px;
        }
      }
    }
  }
  .RecommendedPlaylist_table {
    width: 1000px;
    height: 40px;
    margin-top: 5px;
    text-align: right;
    line-height: 40px;
    span {
      font-size: 15px;
      margin-right: 5px;
      cursor: pointer;
    }
    .last {
      margin-right: 20px;
    }
  }
}
.active {
  color: red;
}
.centers {
  text-align: center;
  margin-top: 15px;
}
</style>